<template>
  <div>
    <div class="coupon-header expire-btn"  v-if="mode===2">
      <span class="fz12" @click="onShowExpire">查看失效券</span>
    </div>
    <div class="coupon-header" v-else-if="mode===3">
      <span class="fz12">已失效：</span>
    </div>
    <div class="coupon-list" v-infinite-scroll="load" infinite-scroll-distance="100" infinite-scroll-disabled="disabled">
      <div v-for="(item,i) in dataList" :key="item.id" class="coupon-item-box">
        <div class="coupon-item" :class="{'item-model':mode===3}">
           <div class="coupon-item-left">
          <p class="pkg-name">{{item.pkgName}}</p>
          <p class="coupon-amount">
            <span class="fz16">￥</span>
            <span class="amount-num">{{parseFloat((item.amount/100).toFixed(2))}}</span>
          </p>
          <p class="amount-type">现金券</p>
        </div>
        <div class="split-line"></div>
        <div class="coupon-item-right">
          <div>
            <p class="coupon-name">{{item.name}}</p>
            <p class="coupon-time" v-if="mode===2">有效期至 {{item.expire_at|parseTime('{y}/{m}/{d} {h}:{i}')}}</p>
            <p class="coupon-time" v-if="mode===3">
              <span v-if="item.status">{{item.used_at|parseTime('{y}/{m}/{d} {h}:{i}')}} 使用</span>
              <span v-else>{{item.expire_at|parseTime('{y}/{m}/{d} {h}:{i}')}} 过期</span>
            </p>
            <p class="coupon-instruct" :title="item.instruct">使用说明<svg-icon iconClass="arrow-right"/></p>
          </div>
          <span class="receive-btn" v-if="mode===1" @click="onReceive(item,i)">立即领取</span>
          <span class="receive-btn" v-if="mode===2" @click="onUse(item,i)">立即使用</span>
        </div>
        </div>
        <div class="expire-label" v-if="mode===3">{{item.status?'已使用':'已过期'}}</div>
      </div>
      <div class="loading-more-text" v-show="listLoading">
        <i class="el-icon-loading"></i>
        <span class="ml10">加载中...</span>
      </div>
      <template v-if="!listLoading&&!dataList.length">
        <div class="empty-box" v-if="mode===1">
          <div class="gift-box">
            <svg-icon iconClass="gift"></svg-icon>
            <div>
              <p class="gift-text">当前无可领取的券，您可查看【我的券】</p>
              <p class="gift-text">还可加入官方用户群参与不定期抽奖活动！</p>
            </div>
          </div>
          <div>
            <img :src="codeImg" class="vip-code-img" alt="">
          </div>
        </div>
        <div class="empty-box" v-else>暂无优惠券</div>
      </template>
    </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
// import { getSalePackage } from '@/api/rights'
import { getCouponList, getUserCouponList, drawCoupon } from '@/api/coupon'
export default {
  name: 'CouponList',
  props: {
    pkgNum: Number,
    mode: Number
  },
  data () {
    return {
      listLoading: true,
      noMore: true,
      dataList: []
    }
  },
  computed: {
    ...mapGetters(['appInfo']),
    disabled () {
      return this.listLoading || this.noMore
    },
    codeImg () {
      switch (this.appInfo.appID) {
        case '108' :
          return require('@/assets/code-user-soso.png')
        case '111' :
          return require('@/assets/code-user-todo.png')
        case '125' :
          return require('@/assets/code-user-paper.png')
        case '144' :
          return require('@/assets/code-user-everything.png')
        default :
          return require('@/assets/code-user-desktop.png')
      }
    }
  },
  async created () {
    if (!this.pkgNum) {
      this.$emit('update:pkgNum', 3)
      // await getSalePackage({ 'cid': ['10001', '10003', '10004'] }).then(res => {
      //   const list = res.data.list || []
      //   this.$emit('update:pkgNum', list.length)
      // })
    }
    this.getList()
  },
  methods: {
    load () {
      if (this.disabled) return
      this.getList()
    },
    onQuery () {
      this.noMore = true
      this.last_id = null
      this.dataList = []
      this.getList()
    },
    getList () {
      this.listLoading = true
      if (this.mode !== 1) {
        this.getUserCouponList()
      } else {
        this.getCouponList()
      }
    },
    getCouponList () {
      getCouponList().then(res => {
        this.dataList = this.transCouponList(res.data.list)
      }).finally(() => {
        this.listLoading = false
      })
    },
    getUserCouponList () {
      const params = {}
      if (this.mode === 3) params.bus_type = 'expire'
      if (this.last_id) params.last_id = this.last_id
      getUserCouponList(params).then(res => {
        const data = res.data || {}
        const list = this.transCouponList(data.list)
        const obj = list[list.length - 1] || {}
        this.dataList = this.dataList.concat(list)
        this.noMore = !data.has_more
        this.last_id = obj.id
      }).finally(() => {
        this.listLoading = false
      })
    },
    transCouponList (list = []) {
      return list.map(item => {
        const isAll = item.support_rpg.length >= 4
        item.isAll = isAll
        item.pkgName = isAll ? '全场适用' : item.support_rpg.map(pkg => pkg.name.replace(/(小智)|(桌面)|(权益包)/g, '')).join('/') + '适用'
        return item
      })
    },
    onUse () {
      this.$PsMessage.closeAll()
      this.$router.push('/usercenter')
    },
    onReceive (row, index) {
      drawCoupon({ coupon_id: row.id }).then(res => {
        this.dataList.splice(index, 1)
        this.$PsMessage({
          message: `领取成功！`,
          urlText: '立即使用',
          iconClass: 'success',
          onClick: () => {
            this.onUse()
          }
        })
      }).catch(res => {
        this.getList()
        this.$PsMessage({ iconClass: 'error', message: res.msg || '服务异常' })
      })
    },
    onShowExpire () {
      this.$emit('tab-change', 'third')
    }
  }
}
</script>
<style lang="scss" scoped>
.coupon-list{
  height: calc(100vh - 120px);
  overflow:auto
}
.coupon-item-box{
  position: relative;
  overflow: hidden;
  .expire-label{
    position: absolute;
    height: 26px;
    line-height: 26px;
    width: 119px;
    text-align: center;
    transform: rotate(45deg);
    right: -30px;
    top: 18px;
    background: #A6A6A6;
    color: #fff;
  }
  +.coupon-item-box{
    margin-top: 10px;
  }
}
.coupon-item{
  display: flex;
  height: 100px;
  width: 100%;
  border-radius: 8px;
  background: #404044;

  .coupon-item-left{
    flex-basis: 143px;
    text-align: center;
  }
  .pkg-name{
    position: absolute;
    padding: 3px 9px;
    font-size: 12px;
    color: #F34040;
    font-weight: 400;
    background: linear-gradient(180deg, #FFE7E7 0%, #FFD8D8 100%);
    border-radius: 8px 0px 8px 0px
  }
  .coupon-amount{
    margin-top: 26px;
    font-weight: bold;
    color: #F84D4D;
  }
  .amount-num{
    font-size: 32px;
  }
  .amount-type{
    margin-top: 2px;
    font-size: 12px;
    color: #F84D4D;
  }
  .split-line{
    flex-basis: 14px;
    height: 100%;
    background-image: linear-gradient(
      transparent 0%,
      transparent 50%,
      rgba(255,255,255,0.1) 50%,
      rgba(255,255,255,0.1) 100%
    );
    background-position: center;
    background-size: 1px 10px;
    background-repeat: repeat-y;
    &::before,&::after{
      content: ' ';
      position: absolute;
      display: inline-block;
      width: 14px;
      height: 14px;
      background-color: #34353B;
      border-radius: 50%;
    }
    &::before{
      top: -7px;
    }
    &::after{
      bottom: -7px;
    }
  }
  .coupon-item-right{
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 30px 0 23px;
  }
  .coupon-name{
    font-size: 16px;
    font-weight: bold;
    color: #fff;
  }
  .coupon-time{
    margin-top: 5px;
    font-size: 12px;
  }
  .coupon-instruct{
    margin-top: 10px;
    font-size: 12px;
    cursor: pointer;
    .svg-icon{
      margin-left: 2px;
    }
    &:hover{
      text-decoration: underline;
    }
  }
  .receive-btn{
    display: inline-block;
    height: 34px;
    line-height: 34px;
    padding: 0px 22px;
    font-weight: bold;
    color: #fff;
    background: #D75050;
    border-radius: 34px;
    cursor: pointer;
    &:hover{
      background: #F85A5A;
      box-shadow: 0px 4px 15px 0px rgba(186,10,10,0.2);
    }
  }
  &.item-model{
    opacity: 0.7;
  }

}
.coupon-header{
  margin-bottom: 10px;
  margin-top: -6px;
}
.expire-btn{
  text-align: right;
  span{
    cursor: pointer;
    &:hover{
      color: #00BBD7;
    }
  }
}
.empty-box{
  margin-top: 15%;
  text-align: center;
}
.gift-box{
  display: flex;
  align-items: center;
  justify-content: center;
  .svg-icon{
    margin-right: 10px;
    font-size: 48px;
  }
  .gift-text{
    line-height: 20px;
    font-size: 12px;
    text-align: left;
  }
}
.vip-code-img{
  margin-top: 16px;
  width: 160px;
}
.loading-more-text{
  margin-top: 15px;
  text-align: center;
}
</style>
